<!DOCTYPE html>
<html>

<head>
    <title>登录和注册</title>
    <meta charset="utf-8">
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0%;
            overflow: hidden;
        }

        canvas {
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
    <canvas></canvas>
</body>
<script>
    var canvas = document.body.querySelector("canvas")
    var body = document.body
    canvas.width = body.clientWidth, canvas.height = body.clientHeight
    var pen = canvas.getContext("2d")
    // background
    {
        class AFrame {
            static objects = { strips: [], cir: { toLeftRows: [], toRightRows: [] } }
            constructor(type, dir = null, rowItems = []) {
                if (type == 'strip') {
                    AFrame.objects.strips.push(this)
                } else if (type == 'cir') {
                    if (dir == 'left') {
                        let row = { items: rowItems, headIdx: 0 }
                        AFrame.objects.cir.toLeftRows.push(row)
                    } else if (dir == 'right') {
                        let row = { items: rowItems, headIdx: rowItems.length - 1 }
                        AFrame.objects.cir.toRightRows.push(row)
                    }else{
                        console.log('dir?')
                    }
                } else {
                    console.log('type?')
                }
            }
            reShow() {
                // clearShow before draw
                pen.clearRect(0, 0, canvas.width, canvas.height)
                // pre draw all strip
                let strips = AFrame.objects.strips
                for (let i = 0; i < strips.length; i++) {
                    strips[i].draw()
                }
                // then dir left and right cir
                let toLeftCirRows = AFrame.objects.cir.toLeftRows
                let toRightCirRows = AFrame.objects.cir.toRightRows
                for (let i = 0; i < toLeftCirRows.length; i++) {
                    for (let i2 = 0; i2 < toLeftCirRows[i].items.length; i2++) {
                        toLeftCirRows[i].items[i2].draw()
                    }
                }
                for (let i = 0; i < toRightCirRows.length; i++) {
                    for (let i2 = 0; i2 < toRightCirRows[i].items.length; i2++) {
                        toRightCirRows[i].items[i2].draw()
                    }
                }
            }
        }
        class strip extends AFrame {
            static num = 10
            static height = canvas.height / strip.num
            constructor(top, color) {
                this.draw = function () {
                    pen.fillStyle = color
                    pen.fillRect(0, top, canvas.width, strip.height)
                }
                super('strip')
            }
        }
        class cir extends AFrame {
            static radius = strip.height / 4
            static gap = 50
            constructor(x, y) {
                this.x = x
                this.y = y
                this.draw = function () {
                    pen.fillStyle = 'yellow'
                    pen.beginPath()
                    pen.arc(this.x, this.y, cir.radius, 0, Math.PI * 2)
                }
            }
        }
        let top = 0
        {
            let bool = true
            function change(start = false) {
                if (start) {
                    bool = true
                    return
                }
                if (bool) {
                    bool = false
                    return true
                } else {
                    bool = true
                    return false
                }
            }
        }
        change(true)
        for (let count = 0; count < strip.num; count++) {
            if (change())
                new strip(top, 'red')
            else
                new strip(top, 'blue')
            top += strip.height
        }
        let rowCirWidth
        {
            let startX = cir.radius, cirRowNextGap = cir.radius * 2 + cir.gap, x
            for (x = startX; x < canvas.width; x += cirRowNextGap);
            let endX = x - cirRowNextGap
            rowCirWidth = endX + cir.radius
        }
        let twoOne = (canvas.width - rowCirWidth) / 2
        let startX = twoOne + cir.radius, startY = strip.height / 2, cirRowNextGap = cir.radius * 2 + cir.gap
        change(true)
        for (let y = startY; y < canvas.height; y += strip.height) {
            let cirs = [], currentDir = change()
            if (currentDir)
                cirs.push(new cir(startX - cirRowNextGap, y))
            let x
            for (x = startX; x < canvas.width; x += cirRowNextGap) {
                cirs.push(new cir(x,y))
            }
            if (currentDir)
                cirs.push(new cir(x,y))
            if(currentDir){
                new AFrame('cir','rihgt',cirs)
            }else{
                new AFrame('cir','left',cirs)
            }
        }
        function aFrame(){

        }
    }
</script>

</html>